<script>
import AreaCommon from "@/components/comp/account_com/AreaCommon.vue";

export default {
  name: "AddAccountDialog",
  components: {AreaCommon},
  data(){
    //电话格式验证
    var checkPhoen = (rule, value, callback) =>{
      if (!value) {
        return callback(new Error('请输入电话号码'));
      }else{
        const regExp = /^(((\d{3,4}-)?[0-9]{7,8})|(1(3|4|5|6|7|8|9)\d{9}))$/;
        if(regExp.test(value)){
          callback();
        }else{
          callback(new Error('号码格式不正确'));
        }
      }
    };
    var isUnamCanUse = (rule, value, callback) => {
        if(value && value.length>1){
            this.$http.get('accounts/is_uname_exist?uname=' + value).then(res =>{
                  if(res.data.data){
                      //账户已存在
                    return callback(new Error('账户已存在，请重新输入'));
                  }else{
                    callback();
                  }
            })
        }
    };

    return {
      dialogVisible:false,
      form: {
        uname:'',
        realName: '',
        pwd:'qq123456',
        gender:'',
        phone:'',
        role:1,
        birthday:'',
        cardType:'',
        cardNo:'',
        qualification:'',//学历
        areaName:'',
        areaCode:'',
        address:'', //详细地址
        backField1:'', //备用字段：继往病史
        hjArea:'',
        hjAreaCode:''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      rules:{
        uname:[
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
          { validator:isUnamCanUse,trigger: 'blur' }
        ],
        realName:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        gender:[{ required: true, message: '请选择性别', trigger: 'change' }],
        birthday:[{ required: true, message: '请输入生日', trigger: 'blur' }],
        phone:[{ validator:checkPhoen, required: true,trigger: 'blur' }],
        backField1:[{ min: 0, max: 400, message: '请控制在400个字符以内', trigger: 'blur' }]
      }
    }
  },
  methods:{
    // 父元素调用此方法，传入用户id
    show_dialog() {
        this.dialogVisible = true;
    },

    reset_dialog(){
      this.$refs.user_form.resetFields();
      this.$refs.area.clear_area();
      this.$refs.hj.clear_area();
      this.form.qualification = '';
      this.form.address='';
      this.form.cardType='';
      this.form.cardNo='';
      this.form.backField1='';
    },

    //获取现居地址的区域信息
    get_address_area(area_name,area_code){
      this.form.areaName = area_name;
      this.form.areaCode = area_code;
    },

    //获取户籍地址
    get_huji(area_name,area_code){
      this.form.hjArea = area_name;
      this.form.hjAreaCode = area_code;
    },



    //提交表单
    onSubmit() {
      const _this = this;
      this.$refs.user_form.validate((valid) => {
          if(valid){
            _this.$http.post('accounts/regist',_this.form).then(res=>{
                if(res.data.data){
                  _this.dialogVisible = false;
                  _this.$message.success("添加成功");
                  _this.$emit('add_ok');
                }else {
                  _this.$message.error(res.data.errMsg);
                }
              })
          }
      });
    },
  }
}
</script>

<template>
  <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="35%"
      @opend="reset_dialog"
      @closed="reset_dialog"
      :close-on-click-modal="false"
  >

    <el-form ref="user_form" :model="form" :rules="rules" label-width="80px" size="small" >

      <el-form-item label="账号" prop="uname">
        <el-input v-model="form.uname" placeholder="推荐使用手机号"></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="realName">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-select  v-model="form.gender" placeholder="请选择性别" style="width: 100%">
          <el-option label="男" value="0"></el-option>
          <el-option label="女" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

      <el-form-item label="出生日期" prop="birthday">
        <div class="block" >
          <el-date-picker
              style="width: 100%"
              v-model="form.birthday"
              type="date"
              value-format="yyyy-MM-dd hh:mm:ss"
              :picker-options="pickerOptions"
              placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="证件类型">
        <el-select  v-model="form.cardType" placeholder="请选择证件类型" style="width: 100%">
          <el-option label="学生证" value="学生证"></el-option>
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="证件号码">
        <el-input v-model="form.cardNo"></el-input>
      </el-form-item>

      <el-form-item label="学历">
        <el-select  v-model="form.qualification" placeholder="请选择" style="width: 100%">
          <el-option label="无" value="无"></el-option>
          <el-option label="小学" value="小学"></el-option>
          <el-option label="初中" value="初中"></el-option>
          <el-option label="高中" value="高中"></el-option>
          <el-option label="大专" value="大专"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="硕士" value="硕士"></el-option>
          <el-option label="博士" value="博士"></el-option>
          <el-option label="其它" value="其它"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="现居地址" >
        <AreaCommon ref="area" @choosd_area="get_address_area"></AreaCommon>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>

      <el-form-item label="户籍地址" >
        <AreaCommon ref="hj" @choosd_area="get_huji"></AreaCommon>
      </el-form-item>

      <el-form-item label="继往病史" prop="backField1">
        <el-input type="textarea"
                  :rows="3"
                  maxlength="400"
                  show-word-limit
                  v-model="form.backField1">
        </el-input>
      </el-form-item>



      <el-form-item align="right">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>


  </el-dialog>
</template>

<style >
.el-dialog > .el-dialog__body{
  //border-top: 1px solid #e9e9e9;
  padding-top: 10px;
  padding-bottom: 10px;
}

</style>